@import "./utils/variables";
@import "./utils/mixins";

.page-commodity-detail {
  display none;
  padding-bottom : 60px;
  background-color #ebeaea;
  header {
      background-color #5aaa60;
      padding : 18px 12px;
      color: #fff;
      clearfix();
      .image {
        width: 48px;
        height: 48px;
        float: left;
        cover();
        background-color $color-gray
      }
      .name {
          margin-bottom 12px;
          font-weight bold;
      }
      .price {
        font-size 0.96rem;
      }
      .btn {
          position absolute;
          right: 16px;
          top: 29px;
          background-color #fff;
          border-radius(6px);
          color: #5aaa60;
          padding: 6px 12px;
          font-weight normal;
          &.active {
            background-color: #ededed;
            color: #999;
          }
      }
  }

   .content {
     padding-left: 18%;
     padding-top: 3px;
   }

  .prices {
    position relative;
    background-color #fff;
    padding : 0;
    width: 100%;
    height 240px;
    ul {
      overflow-y : auto;
      height 200px;
    }
    li {
      a {
        clearfix();
        padding: 12px 8px;
        overflow: hidden;
        display: block;
        font-size : 1rem;

        .wrap {
          width 52%;
          float: left;
          ellipsis();
        }
        .name {
          float: left;
          padding 2px 0;
        }
        .flag {
          position: relative;
          background-color : $color-green-dark;
          display: none;
          border-radius : 4px;
          color: $color-white;
          padding: 2px 3px 3px 0;
          font-size 0.8rem;
          vertical-align: middle;
          float: left;
          margin-left: 3%;
          margin-top: 0;
          .icon-down {
            position: absolute;
            left: 1px;
            top: 3px;
            font-size 0.8rem;
          }
          .icon-Integrity {
            color: $color-white;
            font-size :$font-size-normal;
          }
        }
        .low {
          padding-left: 12px;
        }
          .price {
            display: inline-block;
            margin-left: 3%;
            padding 2px 0;
          }
          +mobile-320() {
            .price {
              margin-left: -2%;
            }
          }
        .distance{
          float: right;
          color: #696565;
          padding 2px 0;
        }
      }

      +mobile-320() {
        a {
          font-size : 0.8rem;
        }
      }
    }
  }


    .prices .title,
    .menus .title {
        color : #2cb359;
        text-align center;
        border-bottom 1px solid #b7b5b5;
        width: 100%;
        height: 40px;
        line-height: 40px;
        z-index 10;
        background-color #fff;
    }

    .menus {
      position relative;
      background-color #fff;
      margin-top 8px;
      .title {
        border-bottom none;
      }
    }

   .commodity-menus {
     padding-bottom: 8px;
   }

}